<template>
  <div class="dataQuery">
    <el-form :inline="true" class="demo-form-inline" style="margin-top: 30px;margin-left: 13%">
      <el-form-item label="开始时间:">
        <el-date-picker
          v-model="queryParam.createTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间:">
        <el-date-picker
          v-model="queryParam.endTime"
          align="right"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="demo-form-inline" style="margin-left: 13%">
      <el-form-item label="按 线 别:">
        <el-select v-model="queryParam.workLineValues"
                   multiple
                   collapse-tags
                   placeholder="请选择" style="width: 108%" >
          <el-option
            v-for="item in workLineList"
            :key="item.workLineId"
            :label="item.workLineName"
            :value="item.workLineId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="按 选  项:" style="margin-left: 20px">
        <el-select v-model="queryParam.selectionValues"
                   multiple
                   collapse-tags
                   placeholder="请选择" style="width: 108%" >
          <el-option
            v-for="item in selection"
            :key="item.name"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button style="padding:8px 20px;background: rgb(108,198,236);color: #ffffff;margin-left: 10px " @click="searchWorLine">查询</el-button>
    </el-form>
    <div style="width:98%;text-align: center;margin-left: 1%" id="produceData">
      <wh-table :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader"></wh-table>
    </div>
    <form action="/autoMonitor/excel/exportExcelData"  method="post"
          style="display: none;" ref="downloadExcel">
      <input name="json" :value="templateExcel.json"/>
      <input name="type" value="1"/>
      <input name="title" value="产线数据"/>
    </form>
    <div style="text-align: center;margin-top: 20px">
      <el-button style="margin-right: 20%;background: rgb(108,198,236);color: #ffffff;" @click="importTemplate">导出</el-button>
      <el-button style="background: rgb(108,198,236);color: #ffffff" @click="printData">打印</el-button>
    </div>
  </div>
</template>
<script>
  import { getToken } from '@/utils/auth' // 验权
  import { printPage } from '@/utils/printPage' // 验权
  import whTable from '@/components/wh-table/index.vue'
  export default {
    nameL:'dataQuery',
    data(){
      return{
        queryParam:{
          createTime:'',
          endTime:'',
          selectionValues:[],
          workLineValues:[]
        },
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        selection:[],
        workLineList:[],
        workId:"",
        workLineType:"",
        templateExcel:{json:""}
      }
    },
    components:{
      whTable
    },

    mounted(){
      let user = JSON.parse(getToken());
      let work = this.$store.state.userInfo.works;
      this.workId = work.workId;
      this.workLineType = user.userDetail.workId;
      let param = {};
      param.workLineType =this.workLineType;
      param.workId =this.workId;
      this.setTableHeader();
      this.setSelection();
      this.getUserWorks(param);
    },

    methods:{

      printData(){
        Print('#produceData', {
          onStart: function () {
            console.log('onStart', new Date())
          },
          onEnd: function () {
            console.log('onEnd', new Date())
          }
        })
      },

      importTemplate(){
        let self = this
        let headers = {tableHeader:[],tableData:self.tableData};
        for(let header of this.tableHeader){
          if(header.status =='0'){
            headers.tableHeader.push(header);
          }
        }
        this.templateExcel.json = JSON.stringify(headers);
        self.$nextTick(()=>{
          self.$refs.downloadExcel.submit();
        })
      },

      searchWorLine(){
        let selectionValues = this.queryParam.selectionValues;
        for(let header of this.tableHeader){
          header.status = selectionValues.includes(header.columnName) ? '0':'-1';
          let children = header.children;
          if(children && children.length >0){
            for(let data of children){
              data.status = header.status;
            }
          }
        }
        if(this.queryParam.workLineValues.length == 0){
          this.tableData = [];
          return;
        }
        let param = {workLineId:this.queryParam.workLineValues,workLineType:this.workLineType};
        if(this.queryParam.createTime){
          param["startTime"] = this.queryParam.createTime;
        }
        if(this.queryParam.endTime){
          param["endTime"] = this.queryParam.endTime;
        }
        this.getUserWorks(param);
      },

      getUserWorks(param){
        let self = this;
        self.$http({
          url: "/autoMonitor/workLine/queryLineDetailByWorkIdAndStatus",
          method: "post",
          data: JSON.stringify(param),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if (resp.success) {
            self.tableLoading = false;
            if(self.workLineList.length == 0){
              for(let data of  resp.result){
                self.workLineList.push({workLineId:data.workLineId,workLineName:data.workLineName});
                self.queryParam.workLineValues.push(data.workLineId)
              }
            }
            self.tableData = resp.result;
            self.computedTotal();
          }
        });
      },

      computedTotal(){
        let total = {};
        for(let data of this.tableData){
          for(let key in data){
            if(typeof data[key]=='string' &&/^[0-9]+.?[0-9]*$/.test(data[key]) ){
              total[key] = total[key]?parseInt(total[key])+parseInt(data[key])+"":data[key];
            }
          }
        }
        total.workLineName = "合计";
        total.color = true;
        this.tableData.push(total)
      },

      setTableHeader(){
        let self = this;
        self.tableHeader = [
          {"columnName": "workLineName", "coloumNameCn": "线别","minWidth":"40","status":"0"},
          {"columnName": "produce", "coloumNameCn": "产量","children":[
              {"columnName": "targetOutput", "coloumNameCn": "计划","minWidth":"40","status":"0"},
              {"columnName": "actualOutput", "coloumNameCn": "实际","minWidth":"40","status":"0"},
              {"columnName": "disOutput", "coloumNameCn": "差额","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
          {"columnName": "progress", "coloumNameCn": "进度","children":[
              {"columnName": "ouputProgress", "coloumNameCn": "产量","minWidth":"40","status":"0"},
              {"columnName": "spendTime", "coloumNameCn": "时间","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
          {"columnName": "person", "coloumNameCn": "人员","children":[
              {"columnName": "planUserCount", "coloumNameCn": "计划","minWidth":"40","status":"0"},
              {"columnName": "actualUserCount", "coloumNameCn": "实际","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
          {"columnName": "product", "coloumNameCn": "线小时产出","children":[
              {"columnName": "hourOutput", "coloumNameCn": "目标","minWidth":"40","status":"0"},
              {"columnName": "hourActualOutput", "coloumNameCn": "实际","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
          {"columnName": "average", "coloumNameCn": "人均产出","children":[
              {"columnName": "userAverageOutput", "coloumNameCn": "目标","minWidth":"40","status":"0"},
              {"columnName": "userActualOutput", "coloumNameCn": "实际","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
          {"columnName": "", "coloumNameCn": "实际停线","children":[
              {"columnName": "stopLineTime", "coloumNameCn": "目标","minWidth":"40","status":"0"},
              {"columnName": "stopActualTime", "coloumNameCn": "实际","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
          {"columnName": "stopSetting", "coloumNameCn": "MU","children":[
              {"columnName": "muPlan", "coloumNameCn": "目标","minWidth":"40","status":"0"},
              {"columnName": "muActual", "coloumNameCn": "实际","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
          {"columnName": "dtd", "coloumNameCn": "MTD","children":[
              {"columnName": "productive", "coloumNameCn": "目标","minWidth":"40","status":"0"},
              {"columnName": "actualProductive", "coloumNameCn": "实际","minWidth":"40","status":"0"},
            ],"minWidth":"40","status":"0"
          },
        ];
      },
      setSelection(){
        for(let header of this.tableHeader){
          let children = header.children;
          let select = {name:"",value:"",disabled:false};
          select.name = header.coloumNameCn;
          select.value = header.columnName;
          this.selection.push(select);
          this.queryParam.selectionValues.push(select.value);

          // if(children && children.length > 0){
          //   for(let child of children){
          //     let childSelect = {name:"",value:"",disabled:false};
          //     childSelect.name = child.coloumNameCn+header.coloumNameCn;
          //     childSelect.value = child.columnName;
          //     this.selection.push(childSelect);
          //     this.queryParam.selectionValues.push(childSelect.value);
          //   }
          // }else{
          //   let select = {name:"",value:"",disabled:false};
          //   select.name = header.coloumNameCn;
          //   select.value = header.columnName;
          //   this.selection.push(select);
          //   this.queryParam.selectionValues.push(select.value);
          // }
        }
      }
    },
    watch:{

    }
  }
</script>
<style>
  /*.el-table td, .el-table th.is-leaf{*/
    /*background: #F2F2F2;*/
    /*text-align: center;*/
    /*border-bottom: 2px solid #ffffff;*/
  /*}*/

  .el-table td{
    cursor: pointer;
  }

  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #ffffff;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: auto;
  }
  .el-table--border, .el-table--group {
    border: 1px solid #ffff;
  }
  .el-table thead.is-group th {
    text-align: center;
  }

  .app-container {
    overflow-y: hidden;
  }

  .dataQuery .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .dataQuery .el-input--prefix .el-input__inner {
    padding-left: 32px;
  }
</style>
